<style scope>
.v-note-wrapper{
    z-index:901 !important;
}
</style>

<template>
    <div>
        <Modal
            v-model="submitModule"
            title="完善以下信息"
            @on-ok="submit"
            >
            <Form :label-width="80">
                <FormItem label="文章标题">
                    <Input v-model="article.title" placeholder="标题"></Input>
                </FormItem>
                <FormItem label="分类标签">
                    <Input v-model="article.tags" placeholder="标签"></Input>
                </FormItem>
            </Form>
        </Modal>
        <mavon-editor ref=md :value='article.markdown'  @change="$change" @save="$save" @imgAdd="$imgAdd" @imgDel="$imgDel" placeholder='# 此处键入标题 #' code_style="agate"/>
    </div>
    
</template>

<script>
    import Qs from 'qs'
    export default{
        name:'Add',
        data(){
            return{
                submitModule:false,
                loding:false,
                article:{

                }
            }
        },
        what:{
            article:function(val){
                console.log(val.markdown);
            }
        },
        mounted(){
            console.log('Modify');
            this.$Loading.start();//加载动画开始
            const that = this;
            this.$http.get(
                that.surl+that.$route.path.substring(7)+'?sessionID='+that.$cookie.get('sessionID')
            )
              .then(function (response) {
                that.$Loading.finish();//加载完毕
                if(response.data!==false){
                  that.article = response.data;
                }else{
                    that.$router.push('/admin/404');
                }
              })
              .catch(function (error) {
                that.$router.push('/admin/404');
              });
        },
        methods:{
            $change(markdown,html){
                this.article.markdown=markdown;
                this.article.html=html;
            },
            $save(){
                if(!(this.article.markdown==='')){
                    this.submitModule = !this.submitModule;
                }else{
                    this.$Modal.info({
                        title: '内容不完整',
                        content: '<p>请将文章内容填写完整</p>'
                    })
                }
            },
            submit(){
                if(!(this.article.markdown===''||this.article.tags===''||this.article.title==='')){          
                    this.loding =!this.loding;
                    this.article.sessionID=this.$cookie.get('sessionID');
                    const that = this;
                    this.$http.post(that.surl+'modify',Qs.stringify(that.article),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                    .then(function(response){
                        that.loding = !that.loding;
                        if(response.data===true){
                            that.$Message.success('修改成功');
                            that.$router.push('/admin/home');
                        }else{
                            that.$Message.error('修改失败');   
                        };
                    })
                    .catch(function(error){
                        that.loding = that.loding;
                        that.$Message.error('修改失败');
                    });
                }else{
                    this.$Modal.info({
                        title: '内容不完整',
                        content: '<p>请将内容填写完整</p>'
                    })
                }
            },
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
                // 第一步.将图片上传到服务器.
               const formdata = new FormData();
               formdata.append('image', $file);
               console.log($file);
               this.$http({
                   url: this.surl+'image?sessionID='+this.$cookie.get('sessionID'),
                   method: 'post',
                   data: formdata,
                   headers: { 'Content-Type': 'multipart/form-data' },
               }).then((response) => {
                   this.$refs.md.$img2Url(pos, response.data);
               })
            },
            $imgDel(filename){
                this.$refs.md.$refs.toolbar_left.$imgDelByFilename(filename);
                console.log(filename);
            }
        }
    }
</script>